<template>
  <div class="myTable">
    <el-row class="searchRow">
      <el-select v-model="type" placeholder="政策法规类别" clearable style="margin-right: 15px">
        <el-option
            v-for="item in categories"
            :key="item.type"
            :label="item.name"
            :value="item.type">
        </el-option>
      </el-select>
      <el-button type="success" @click="query(1)">查询</el-button>
      <el-button  type="default" @click="clear()" >重置</el-button>
    </el-row>
    <el-table :data="tableData.data" :show-header="true" :header-row-class-name="'tableHead'" :header-cell-class-name="'tableHeadCell'" >
      <el-table-column  type="index" label="NO" :index="indexMethod" width="60px"></el-table-column>
      <!--<el-table-column  label="政策法规类别"  prop="type"></el-table-column>-->
      <el-table-column label="标题" class="zhouText"  >
        <template slot-scope="scope">
          <el-link type="primary" :underline=false class="zhouText" @click="showDetail(scope.row)">{{scope.row.title}}</el-link>
          <!--<router-link to="/fourEvent/eventDetail/8a8ddb8c63d39d4b016402514fca00b6">{{scope.row.itemName}}</router-link>-->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="query" style="margin-top: 25px" :current-page="tableData.curPageNO"
                   layout="total,prev, pager, next" :total="tableData.rowsCount" background :page-size="tableData.pageSize"> </el-pagination>

<!--    <el-dialog  width="80%" title="" :fullscreen=false class="fullDialog" :visible.sync="dialogVisible">
      <iframe id="frame-main" :src="url" style="height: 600px;border: none" >
      </iframe>
    </el-dialog>-->

    <el-dialog   width="80%" :title="detail.title" :fullscreen=false class="fullDialog" :visible.sync="dialogVisible">
  <!--    <table style="width: 100%" class="labelClass">
        <tr>
          <td>发 布 机 构</td><td>{{foodDetail.fbjg}}</td>
          <td>生 成 日 期</td><td>{{foodDetail.publicdate}}</td>
          <td>公 开 方 式</td><td>{{foodDetail.publictype}}</td></tr>
        <tr><td>索 引 号</td><td>{{foodDetail.indexno}}</td>
          <td>有 效 期</td><td>{{foodDetail.period}}</td>
          <td>文 号</td><td>{{foodDetail.docNo}}</td>
        </tr>
        <tr><td>关 键 词</td>{{foodDetail.none}}<td></td>
          <td>责任科室</td>{{foodDetail.none}}<td></td>
          <td>主题分类</td><td>{{foodDetail.ztfl}}</td></tr>
      </table>-->
      <div class="textWrap">
        <p class="textLeft content myWord" v-html="detail.contents">
        </p>
      </div>
    </el-dialog>

  </div>
</template>
<script>
  /* eslint-disable no-unreachable */
  const categories = [{type: "", name: "全部"},{type:"monetary",name:"金融类"},{type:"trading",name:"贸易类"},{type:"invest",name:"投资类"},{type:"integrate",name:"综合类"}];
  export default {
    name: "setLaw",
    data: function() {
      return {
        categories:categories,
        type:"",
        tableData: {},
        dialogVisible:false,
        detail:""
      }
    },
    methods:{
      indexMethod:function(index){
        return (this.tableData.curPageNO-1)*10+index+1;
      },
      query:function(pageNo){
        let vm = this;
        let data = {
          curPageNO:pageNo,
          pageSize:10,
          type:vm.type,
        }
        this.$http.post("/yczmq/bigScreen/zcfg/page",window.changeDataType(data)).then(resp => {
          if(resp.status == 0){
            vm.tableData = resp.data;
          }
        })
      },
      clear(){
        this.type = "";
      },
      showDetail:function(item){
     /*   window.open(item.itemUrl,"_blank");
        return;*/
        let vm = this;
        this.$http.get("/yczmq/bigScreen/zcfg/get/{id}".replace("{id}",item.id)).then(resp => {
          if (resp.status == 0) {
            vm.detail = resp.data;
            vm.dialogVisible = true;
          }
        })
      }
    },
    created(){
      this.query(1);
    }
  }
</script>
<style scoped>
</style>